<template>
  <div>
    <el-table
      ref="dataTable"
      v-loading="table.loading"
      stripe
      highlight-current-row
      :data="table.tableRows"
      style="margin-top: 20px;"
      @select="select"
      @select-all="selectAll"
      @current-change="changeCurrent"
      @sort-change="changeSort"
    >
      <el-table-column v-if="isMultipleTable" type="selection" :selectable="selectable"></el-table-column>
      <el-table-column type="index" label="序号" :index="indexMethod"></el-table-column>
      <el-table-column
        property="shopTitle"
        label="店铺标题"
        min-width="120px"
        sortable
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-dropdown placement="bottom-start">
            <el-button type="text" size="small">{{ scope.row.shopTitle }}</el-button>
            <el-dropdown-menu slot="dropdown" style="margin-left: 10px">
              <el-dropdown-item
                @click.native="showJoinDetail({
                detailDialog: 'GoodsShopDetailDialog',
                url: '/goods-shop/admin/one/' + scope.row.shopId
              })"
              >详情</el-dropdown-item>
              <el-dropdown-item
                @click.native="showJoinSearch({
                searchDialog: 'GoodsShopMain'
              })"
              >搜索</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
<el-table-column
        property="shopIsActive"
        label="店铺是否可用"
        min-width="120px"
        sortable
        show-overflow-tooltip
        :formatter="(row, column, cellValue) => formatterDict(cellValue, 'YES_NO')"
      ></el-table-column>
<el-table-column
        property="categoryTitle"
        label="商品类目名称"
        min-width="120px"
        sortable
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-dropdown placement="bottom-start">
            <el-button type="text" size="small">{{ scope.row.categoryTitle }}</el-button>
            <el-dropdown-menu slot="dropdown" style="margin-left: 10px">
              <el-dropdown-item
                @click.native="showJoinDetail({
                detailDialog: 'GoodsCategoryDetailDialog',
                url: '/goods-category/admin/one/' + scope.row.categoryId
              })"
              >详情</el-dropdown-item>
              <el-dropdown-item
                @click.native="showJoinSearch({
                searchDialog: 'GoodsCategoryMain'
              })"
              >搜索</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
<el-table-column
        property="categoryIsActive"
        label="商品类目是否可用"
        min-width="120px"
        sortable
        show-overflow-tooltip
        :formatter="(row, column, cellValue) => formatterDict(cellValue, 'YES_NO')"
      ></el-table-column>
<el-table-column
        property="title"
        label="商品标题"
        min-width="120px"
        sortable
        show-overflow-tooltip
      ></el-table-column>
<el-table-column property="picUrl" label="商品图片" min-width="120px">
        <template slot-scope="scope">
          <el-image
            style="width: 60px; height: 60px"
            fit="contain"
            :src="scope.row.picUrl ? scope.row.picUrl.indexOf('http') >= 0 ? scope.row.picUrl : resUrl + scope.row.picUrl : ''"
            :preview-src-list="[scope.row.picUrl ? scope.row.picUrl.indexOf('http') >= 0 ? scope.row.picUrl : resUrl + scope.row.picUrl : '']"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="商品活动" min-width="120px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.hotId" type="danger" size="mini">热</el-tag>
          <el-tag v-if="scope.row.newId" type="danger" size="mini">新</el-tag>
          <el-tag v-if="scope.row.agentCount > 0" type="danger" size="mini">代</el-tag>
          <el-tag v-if="scope.row.grouponCount > 0" type="danger" size="mini">拼</el-tag>
          <el-tag v-if="scope.row.seckillCount > 0" type="danger" size="mini">秒杀</el-tag>
          <el-tag v-if="scope.row.promotionCount > 0" type="danger" size="mini">促</el-tag>
        </template>
      </el-table-column>
<el-table-column
        property="brandTitle"
        label="品牌名称"
        min-width="120px"
        sortable
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-dropdown placement="bottom-start">
            <el-button type="text" size="small">{{ scope.row.brandTitle }}</el-button>
            <el-dropdown-menu slot="dropdown" style="margin-left: 10px">
              <el-dropdown-item
                @click.native="showJoinDetail({
                detailDialog: 'GoodsBrandDetailDialog',
                url: '/goods-brand/admin/one/' + scope.row.brandId
              })"
              >详情</el-dropdown-item>
              <el-dropdown-item
                @click.native="showJoinSearch({
                searchDialog: 'GoodsBrandMain'
              })"
              >搜索</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
<el-table-column
        property="brandIsActive"
        label="品牌是否可用"
        min-width="120px"
        sortable
        show-overflow-tooltip
        :formatter="(row, column, cellValue) => formatterDict(cellValue, 'YES_NO')"
      ></el-table-column>
<el-table-column
        property="intro"
        label="图文详情"
        min-width="120px"
        sortable
        show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button type="text" @click="showContentDialog(scope.row.intro)">点击查看</el-button>
        </template></el-table-column>
<el-table-column
        property="shelfStatus"
        label="上架状态"
        min-width="120px"
        sortable
        show-overflow-tooltip
        :formatter="(row, column, cellValue) => formatterDict(cellValue, 'SHELF_STATUS')"
      ></el-table-column>
<el-table-column
        property="saleCount"
        label="销量"
        min-width="120px"
        sortable
        show-overflow-tooltip
      ></el-table-column>
<el-table-column
        property="clickCount"
        label="点击数"
        min-width="120px"
        sortable
        show-overflow-tooltip
      ></el-table-column>
<el-table-column
        property="version"
        label="版本号"
        min-width="120px"
        sortable
        show-overflow-tooltip
      ></el-table-column>
<el-table-column
        property="createTime"
        label="创建时间"
        min-width="120px"
        sortable
      ></el-table-column>
<el-table-column
        property="updateTime"
        label="更新时间"
        min-width="120px"
        sortable
      ></el-table-column>
<el-table-column
        property="isActive"
        label="是否可用"
        min-width="120px"
        sortable
        show-overflow-tooltip
      >
        <template slot="header">
          是否可用
          <el-tooltip effect="dark" content="商品
是否可用" placement="top">
            <i class="el-icon-info" />
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <template v-if="!isOnlyShowTable">
            <el-button
              v-if="scope.row.isActive === 0"
              size="mini"
              type="danger"
              plain
              @click="active(scope.row)"
            >否</el-button>
            <el-button
              v-if="scope.row.isActive === 1"
              size="mini"
              type="primary"
              plain
              @click="active(scope.row)"
            >是</el-button>
          </template>
          <template v-else>
            <el-button v-if="scope.row.isActive === 0" size="mini" type="danger" plain>否</el-button>
            <el-button v-if="scope.row.isActive === 1" size="mini" type="primary" plain>是</el-button>
          </template>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="100px">
        <template slot-scope="scope">
          <el-dropdown v-if="isOnlyShowTable">
            <el-button type="primary" size="small">
              选择
              <i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown" style="margin-left: 10px">
              <el-dropdown-item @click.native="showDetail(scope.row)">详情</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div v-else>
            <el-dropdown>
              <el-button type="primary" size="small">
                选择
                <i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown" style="margin-left: 10px">
                <el-dropdown-item @click.native="showEdit(scope.row)">编辑</el-dropdown-item>
                <el-dropdown-item @click.native="showDetail(scope.row)">详情</el-dropdown-item>
                <el-dropdown-item divided @click.native="remove(scope.row)">
                  <span style="color: #ff0000;">删除</span>
                </el-dropdown-item>
                <el-dropdown-item @click.native="showUploadImage(scope.row)">轮播图片</el-dropdown-item>
                <el-dropdown-item @click.native="showImageOrder(scope.row)">图片排序</el-dropdown-item>
                <el-dropdown-item @click.native="showSkus(scope.row)">商品SKU</el-dropdown-item>
                <el-dropdown-item @click.native="showDistributionRatio(scope.row)">分销设置</el-dropdown-item>
                <el-dropdown-item @click.native="showExpressTemplateDialog(scope.row)">配置运费模板</el-dropdown-item>
                <el-dropdown-item @click.native="showExpressDetail(scope.row)">查看运费详情</el-dropdown-item>
                <el-dropdown-item @click.native="showXcxLink(scope.row)">小程序链接</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown style="margin-top: 10px;">
              <el-button type="primary" size="small">
                活动
                <i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown" style="margin-left: 10px">
                <el-dropdown-item @click.native="showHotSetDialog(scope.row)">设置热门</el-dropdown-item>
                <el-dropdown-item v-if="scope.row.hotId" @click.native="cancelHot(scope.row)">取消热门</el-dropdown-item>
                <el-dropdown-item @click.native="showNewSetDialog(scope.row)">设置新品</el-dropdown-item>
                <el-dropdown-item v-if="scope.row.newId" @click.native="cancelNew(scope.row)">取消新品</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 20px; overflow: hidden">
      <div style="float: right;">
        <el-pagination
          :current-page="pager.pageNo"
          :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pager.total"
          @size-change="changePageSize"
          @current-change="changePageNo"
        />
      </div>
    </div>
    <UploadImageDialog ref="UploadImageDialog" :multiple="true" :limit="5" :autoCloseDialog="false" :autoRefreshTable="false"/>
    <GoodsHotAddEditDialog ref="GoodsHotAddEditDialog" @add="addHot" @edit="editHot"/>
    <GoodsNewAddEditDialog ref="GoodsNewAddEditDialog" @add="addNew" @edit="editNew"/>
  </div>
</template>

<script>
import * as utils from '@/utils/utils'
const resUrl = process.env.VUE_APP_RES_URL
import UploadImageDialog from '@/components/Upload/UploadImageDialog'
import GoodsHotAddEditDialog from '../GoodsHot/GoodsHotAddEditDialog.vue'
import GoodsNewAddEditDialog from '../GoodsNew/GoodsNewAddEditDialog.vue'
export default {
  name: 'GoodsInfoTable',
  components: {
    UploadImageDialog,
    GoodsHotAddEditDialog,
    GoodsNewAddEditDialog
  },
  props: {
    /** 是否单选表格 */
    isSingleTable: {
      type: Boolean,
      default: false
    },
    /** 是否多选表格 */
    isMultipleTable: {
      type: Boolean,
      default: false
    },
    /** 是否仅展示的表格，表格中不包含激活/冻结、编辑、删除等操作 */
    isOnlyShowTable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchType: 'advance',
      pager: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      searchOpts: {
        sortColumn: null,
        sortOrder: null
      },
      table: {
        loading: false,
        tableRows: [],
        pageSelection: {},
        allSelection: [],
        currentRow: {}
      },
      dataDictCodes: ['YES_NO','SHELF_STATUS',],
      dataDictItems: [],
      selectedData: [],
      selectedDataIdProp: 'id',
      extraData: {},
      resUrl: resUrl
    }
  },
  computed: {},
  mounted() {
    this.search()
  },
  methods: {
    /** 表格索引 */
    indexMethod(index) {
      return index + (this.pager.pageNo - 1) * this.pager.pageSize + 1
    },
    /** 触发父组件表格搜索事件 */
    search() {
      if (this.searchType === 'advance') {
        this.$emit('searchTable')
      } else if (this.searchType === 'quick') {
        this.$emit('quickSearch')
      }
    },
    /** 触发父组件展示编辑对话框 */
    showEdit(row) {
      this.$emit('showEditDialog', JSON.parse(JSON.stringify(row)))
    },
    /** 触发父组件展示数据详情对话框 */
    showDetail(row) {
      this.$emit('showDetailDialog', JSON.parse(JSON.stringify(row)))
    },
    /** 删除行数据 */
    remove(row) {
      utils.remove({
        tableComponent: this,
        url: '/goods-info/admin/remove/' + row.id
      })
    },
    /** 激活或冻结行数据 */
    active(row) {
      utils.active({
        tableComponent: this,
        url: '/goods-info/admin/active',
        row: row
      })
    },
    /** 多选表格选中或取消选中 */
    select(selection, row) {
      utils.select(this, selection, row)
    },
    /** 多选表格全选或取消全选 */
    selectAll(selection) {
      utils.selectAll(this, selection)
    },
    /** 多选表格行数据是否可被勾选 */
    selectable(row, index) {
      return utils.selectable(this, row)
    },
    /** 单选表格选中数据 */
    changeCurrent(currentRow) {
      if (currentRow) {
        this.table.currentRow = currentRow
      }
    },
    /** 表格切换排序字段 */
    changeSort(sortColumn) {
      utils.changeSort(this, sortColumn)
    },
    /** 切换分页组件pageNo */
    changePageNo(pageNo) {
      utils.changePageNo(this, pageNo)
    },
    /** 更新分页组件pageSize */
    changePageSize(pageSize) {
      utils.changePageSize(this, pageSize)
    },
    /** 触发父组件展示关联表数据的详情对话框 */
    showJoinDetail(options) {
      this.$emit('showJoinDetailDialog', options)
    },
    /** 触发父组件展示关联表数据的搜索对话框 */
    showJoinSearch(options) {
      this.$emit('showJoinSearchDialog', options)
    },
    /** 格式化表格中的数据字典 */
    formatterDict(cellValue, dictCode) {
      return utils.getDataDictItemDisplayValue({
        dataDictItems: this.dataDictItems,
        dictCode: dictCode,
        value: cellValue
      }).displayValue
    },
    //查看内容
    showContentDialog(value) {
      this.$emit('showContentDialog', value)
    },
    showUploadImage(goodsInfo) {
      const uploadDialog = this.$refs.UploadImageDialog
      uploadDialog.uploadUrl = '/goods-pic/admin/upload-img'
      uploadDialog.removeUrl = '/goods-pic/admin/remove/'
      uploadDialog.theData = {shopId: goodsInfo.shopId, shopTitle: goodsInfo.shopTitle, goodsId: goodsInfo.id, goodsTitle: goodsInfo.title}
      uploadDialog.setHeaders()
      uploadDialog.theFileList = []
      utils.doPostJson('/goods-pic/admin/all-cond', {
        goodsId: goodsInfo.id,
        isActive: 1,
        sortColumn: 'picOrder',
        sortOrder: 'asc'
      }, {}).then(response => {
        response.data.rows.forEach(pic => {
          uploadDialog.theFileList.push({id: pic.id, url: pic.picUrl ? pic.picUrl.indexOf('http') >= 0 ? pic.picUrl : this.resUrl + pic.picUrl : ''})
        })
      }).catch(error => {})
      uploadDialog.dialog = true
    },
    showImageOrder(goodsInfo) {
      this.$emit('showImageOrder', goodsInfo)
    },
    showSkus(goodsInfo) {
      this.$emit('showSkus', goodsInfo)
    },
    showHotSetDialog(goodsInfo) {
      const goodsHotAddEditDialog = this.$refs.GoodsHotAddEditDialog
      goodsHotAddEditDialog.chooseGoodsInfo = false
      goodsHotAddEditDialog.form.shopId = goodsInfo.shopId
      goodsHotAddEditDialog.form.shopTitle = goodsInfo.shopTitle
      goodsHotAddEditDialog.form.shopIsActive = goodsInfo.shopIsActive
      goodsHotAddEditDialog.form.goodsId = goodsInfo.id
      goodsHotAddEditDialog.form.goodsTitle = goodsInfo.title
      goodsHotAddEditDialog.form.goodsPicUrl = goodsInfo.picUrl
      goodsHotAddEditDialog.form.goodsIsActive = goodsInfo.isActive
      if (goodsInfo.hotId) {
        goodsHotAddEditDialog.dialog.edit = true
        utils.doPostJson('/goods-hot/admin/all-cond', {
          shpoId: goodsHotAddEditDialog.form.shopId,
          goodsId: goodsHotAddEditDialog.form.goodsId
        }, {}).then(response => {
            if (response.data.rows.length > 0) {
              goodsHotAddEditDialog.form = response.data.rows[0]
            }
        }).catch(error => {})
      } else {
        goodsHotAddEditDialog.dialog.add = true
      }
    },
    addHot() {
      const goodsHotAddEditDialog = this.$refs.GoodsHotAddEditDialog
      goodsHotAddEditDialog.$refs.addForm.validate(valid => {
        if (valid) {
          utils.doPostJson('/goods-hot/admin/save', goodsHotAddEditDialog.form, {}).then(response => {
            this.$message.success('已设置为热门商品')
            goodsHotAddEditDialog.dialog.add = false
            this.search()
          }).catch(error => {})
        }
      })
    },
    editHot() {
      const goodsHotAddEditDialog = this.$refs.GoodsHotAddEditDialog
      goodsHotAddEditDialog.$refs.editForm.validate(valid => {
        if (valid) {
          utils.doPostJson('/goods-hot/admin/update', goodsHotAddEditDialog.form, {}).then(response => {
            this.$message.success('已修改热门商品信息')
            goodsHotAddEditDialog.dialog.edit = false
            this.search()
          }).catch(error => {})
        }
      })
    },
    cancelHot(goodsInfo) {
      this.$confirm('确认取消热门吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        utils.doPostJson('/goods-hot/admin/active', {
          id: goodsInfo.hotId,
          isActive: 0
        }, {}).then(response => {
            this.$message.success('已取消热门商品')
            this.search()
        }).catch(error => {})
      }).catch(() => {})
    },
    showNewSetDialog(goodsInfo) {
      const goodsNewAddEditDialog = this.$refs.GoodsNewAddEditDialog
      goodsNewAddEditDialog.chooseGoodsInfo = false
      goodsNewAddEditDialog.form.shopId = goodsInfo.shopId
      goodsNewAddEditDialog.form.shopTitle = goodsInfo.shopTitle
      goodsNewAddEditDialog.form.shopIsActive = goodsInfo.shopIsActive
      goodsNewAddEditDialog.form.goodsId = goodsInfo.id
      goodsNewAddEditDialog.form.goodsTitle = goodsInfo.title
      goodsNewAddEditDialog.form.goodsPicUrl = goodsInfo.picUrl
      goodsNewAddEditDialog.form.goodsIsActive = goodsInfo.isActive
      if (goodsInfo.newId) {
        goodsNewAddEditDialog.dialog.edit = true
        utils.doPostJson('/goods-new/admin/all-cond', {
          shpoId: goodsNewAddEditDialog.form.shopId,
          goodsId: goodsNewAddEditDialog.form.goodsId
        }, {}).then(response => {
            if (response.data.rows.length > 0) {
              goodsNewAddEditDialog.form = response.data.rows[0]
            }
        }).catch(error => {})
      } else {
        goodsNewAddEditDialog.dialog.add = true
      }
    },
    addNew() {
      const goodsNewAddEditDialog = this.$refs.GoodsNewAddEditDialog
      goodsNewAddEditDialog.$refs.addForm.validate(valid => {
        if (valid) {
          utils.doPostJson('/goods-new/admin/save', goodsNewAddEditDialog.form, {}).then(response => {
            this.$message.success('已设置为新商品')
            goodsNewAddEditDialog.dialog.add = false
            this.search()
          }).catch(error => {})
        }
      })
    },
    editNew() {
      const goodsNewAddEditDialog = this.$refs.GoodsNewAddEditDialog
      goodsNewAddEditDialog.$refs.editForm.validate(valid => {
        if (valid) {
          utils.doPostJson('/goods-new/admin/update', goodsNewAddEditDialog.form, {}).then(response => {
            this.$message.success('已修改新商品信息')
            goodsNewAddEditDialog.dialog.add = false
            this.search()
          }).catch(error => {})
        }
      })
    },
    cancelNew(goodsInfo) {
      this.$confirm('确认取消新品吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        utils.doPostJson('/goods-new/admin/active', {
          id: goodsInfo.newId,
          isActive: 0
        }, {}).then(response => {
            this.$message.success('已取消新品')
            this.search()
        }).catch(error => {})
      }).catch(() => {})
    },
    showDistributionRatio(goodsInfo) {
      this.$emit('showDistributionRatio', goodsInfo)
    },
    showExpressTemplateDialog(goodsInfo) {
      this.$emit('showExpressTemplateDialog', goodsInfo)
    },
    showExpressDetail(goodsInfo) {
      this.$emit('showExpressDetail', goodsInfo)
    },
    showXcxLink(goodsInfo) {
      this.$alert('小程序轮播图：/pages/product/product?gi=' + goodsInfo.id + '<br/>公众号文章：pages/product/product?gi=' + goodsInfo.id,
       '小程序链接', {
          dangerouslyUseHTMLString: true
        })
    }
  }
}
</script>

<style>
</style>